<template>
  <div >
    <div class="contain-top" >
      <div class="top-middle">
        <div class="top-middle-map">
          <div id="bdmap" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>
          <div class="map-container">
            <amap :zoom="11" :center="center">
              <amap-marker  v-for="(marker,index) in markers"
                            :key="index"
                            :position="marker.position" />
            </amap>
          </div>
        </div>
      </div>
    </div>



  </div>

</template>

<script defer="defer">
  import { mapGetters } from 'vuex'
  import * as store from "@/api/store/store"

  export default {
    name: 'Dashboard',
    data() {
      return {
        storeList:null,
        physicianList:null,
        clientList:null,
        selectNameAndInventoryList:null,
        proNameList:[],
        proInventoryList:[],
        map:null,
        dialogVisibleStore: false,
        markers:[
          // {
        //   position:[121.48,31.22],
        // },{
        //   position:[121.6,31.3],
        // },{
        //   position:[121.467826,31.246363],
        // },{
        //   position:[121.482824,30.923178],
        // },{
        //   position:[121.373619,31.746609],
        // },{
        //   position:[121.246751,31.00985],
        // },{
        //   position:[121.403917,31.354982],
        // },{
        //   position:[121.403768,31.355758],
        // },{
        //   position:[121.391253,31.121468],
        // },{
        //   position:[121.64891,31.195115],
        // },{
        //   position:[121.492521,31.413935],
        // },{
        //   position:[121.389804,31.226884],
        // },{
        //   position:[121.733523,31.392282],
        // },{
        //   position:[121.264153,31.355324],
        // },{
        //   position:[121.229007,31.072203],
        // },{
        //   position:[121.495946,31.239125],
        // },{
        //   position:[121.454768,31.245129],
        // },{
        //   position:[121.605333,31.337689],
        // },{
        //   position:[121.25114,31.384979],
        // }
        ],
        textMap: {
          update: 'Edit',
          create: 'Create'
        },
        //这个是中心坐标
        center:[109.00,34.2],
        total: 0,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          pageSize: 10,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: [],
          storeCount:null,
          physicianCount:null,
          clientCount:null
        },

      }
    },
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    //加载dom之前执行
    created () {
      this.getList();
    },
    mounted() {

    },

    methods: {

      async getList() { // 获取列表数据
        const { content } = await store.getPosition(this.listQuery)
        this.markers = content
        console.log("地图地址",content)
      },

      handler ({BMap, map}) {
        let me = this;
        console.log(BMap, map)
        // 鼠标缩放
        map.enableScrollWheelZoom(true);
        // 点击事件获取经纬度
        map.addEventListener('click', function (e) {
          console.log(e.point.lng, e.point.lat)
        })
      },







    },

//调用


    beforeDestroy() {

    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;

    }
    &-text {
      font-size: 20px;
      line-height: 30px;
    }
  }
  .important-text {
    font-size: 40px !important;
    line-height: 80px !important;
  }
  .dashboard-logo {
    margin-top: 120px;
    text-align: center;
    img {
      width: 150px;
      height: 150px;
    }
    span {
      color: #bfcbd9;
    }
  }
  .top-top{
    width: 98%;
    height: 160px;
    margin-left: 30px;
    display: flex;
    flex-direction: row;
  }
  .top-bottom{
    width: 96%;
    height: 160px;
    margin-left: 30px;

  }
  .top-top-top{
    width: 31.5%;
    height: 150px;
    margin-right: 8px;
    font-family: 'Share Tech Mono', monospace;
    color: #333333;
    color: #333333;
    text-shadow: 0 0 1px #C0C0C0, 0 0 5px rgba(10, 175, 230, 0);
    background: #1E90FF;
    background: radial-gradient(ellipse at center,  #FFFFFF  0%, #FFFFFF 70%);
    background-size: 100%;
    border-radius: 5px;

    span{
      margin-left: 50px;
      color: #ffffff;
      font-size: 22px;
    }
  }
  .top-top-top-text{
    margin-top: 55px;
    margin-left: 55px;
    font-size: 30px;
  }
  .contain-top{
    width: 100%;
    height: 1500px;
    float: left;
    margin-bottom: 40px;
  }

  .contain-buttom{
    width: 94%;
    height: 30%;
    float: left;
    margin-left: 30px;
    margin-top: 30px;
    background-color: #ffffff;
    border-radius: 10px;
  }
  .top-middle{
    width: 96%;
    height: 100%;
    margin-left: 30px;
    float: left;
  }
  .top-middle-left{
    width: 100%;
    height: 100%;
    float: left;
    margin-right: 10px;
  }
  .top-middle-left01{
    width: 100%;
    height: 320px;
    float: left;
  }
  .top-middle-left02{
    width: 100%;
    height: 320px;
    float: left;
    margin-top: 10px;

  }
  .top-middle-map{
    width: 100%;
    height:800px;
    float: left;
    margin-right: 10px;
  }



  .map {
    width: 100%;
    height: 100%;
  }

  .map-container{
    width: 100%;
    height: 100%;
  }

  .list-store{
    width: 200px;
    height: 200px;
    border: #999999;
    border-radius: 10px ;
    background-color: red;

  }

</style>
